<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Vue Project</title>
    <script src="app/static/vue.js"></script>
    <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
</head>
<body>
<div id="app">
    <div>{{message}}</div>
    <div>{{fullName}}</div>
    <input type="number" v-model="number">
    <input type="text" v-model="firstName">
    <div>{{number}}</div>
    <div v-if="number%3==0">被3整除</div>
    <div v-if="number%3!=0">不被3整除</div>
    <select v-model="selected" multiple>
        <option value="123">1</option>
        <option value="234">2</option>
        <option value="345">3</option>
    </select>
    <div>{{selected}}</div>
    <ol>
        <li v-for="book in books">
            <template v-for="(value,k,i) in book">{{value}} - {{k}} - {{i}}</template>
        </li>
        <li>
            <template v-for="n of 10">{{n}} </template>
        </li>
        <li is="my-item" v-for="(i,index) in books" v-on:remove="books.splice(index, 1);" :book="i"></li>
    </ol>
    <button @click="reverseMessage" :title="message">
        Reverse Message
    </button>
</div>
</body>
<script type="application/javascript">

    Vue.component("my-item",{
        props: ['book'],
        template:"<li>{{book}}<button v-on:click='$emit(\"remove\")'>x</button></li>"
    })

    var app = new Vue({
        el: "#app",
        data: {
            message:"hello world",
            number: 10,
            firstName:"Wu",
            lastName:"Jin",
            books: [{
                name: "计算机科学"
            }, {
                name: "java入门"
            }, {
                name: "精通nginx"
            }],
            selected:[]
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split("").reverse().join("");
            },
            cur:function() {
                return Date.now();
            }
        },
        computed:{
            reverseMessage1:function() {
                return this.message.split("").reverse().join("");
            },
            now:function() {
                return Date.now();
            },
            fullName:function () {
                return this.firstName+" "+this.lastName;
            }
        }
    });

    app.$watch("number",function(newVal,oldVal){
        console.log("number由"+oldVal+"-->"+newVal)

    })

</script>
</html>